<template>
    <div class="article-detail">
        <h1>{{ title }}</h1>
        <v-md-preview :text="content"></v-md-preview>
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';
import { ref } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

VMdPreview.use(vuepressTheme);

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  }
});

const content = ref(props.content);
console.log(content.value);
</script>

<style scoped>
.article-detail {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.article-detail h1 {
  color: #333;
  margin-bottom: 20px;
}
</style>
